<template>
  <div>
    <!-- 配置我的界面的子路由 -->
    <!-- 当我们在使用子路由的时候 需要将路径进行手动补全 -->
    <!-- <router-link to="/me/meInfo">个人信息</router-link> |
    <router-link to="/me/meDetail">个人详情</router-link> -->

    <!-- 使用编程式导航进行页面的切换 -->
    <button @click="toMeInfo">个人信息</button>
    <button @click="toMeDetail">个人详情</button>
    <!-- 加载路由界面的显示 !!!!!!-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      meId: "123456",
    };
  },
  methods: {
    // 跳转到我的信息页面
    toMeInfo() {
      // 通过特定的方法 进行路由的切换/跳转
      // 通过$router.push进行跳转
      this.$router.push({
        // path路径
        path: "/me/meInfo",
        // 获取到我的id
        // 通过query对象进行路由传参
        query: {
          meId: this.meId,
        },
      });
    },
    // 跳转到我的详情页面
    toMeDetail() {
      this.$router.push({
        // path路径
        // path: "/me/meDetail",
        // 通过name去进行页面的切换
        // 使用命名路由传参 只要接收参数的页面进行刷新 传递过去的参数就会消失
        name: "MeDetail",
        // 参数使用params对象进行包裹
        params: {
          meId: this.meId,
        },
      });
    },
  },
};
</script>

<style scoped>
</style>